<template>
  <FModal header="操作范围" ref="refFModal" width="960" @ok="setMenuActionRangeToOrigin">
    <div class="form-process-todo-list-table-wrapper">
      <el-table height="100%" border stripe :data="menuActionRanges"
                width="100%" style="width: 100%;">

        <el-table-column show-overflow-tooltip prop="preBracket" label="前置括号">
          <template #default="{row}">
            <el-select v-model="row.preBracket" placeholder="前置括号" clearable filterable>
              <el-option v-for="opt in preBracketOptions" :key="opt" :label="opt" :value="opt"/>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="fieldName" label="数据域">
          <template #default="{row}">
            <el-select v-model="row.fieldName" @change="() => fieldChange(row)"
                       clearable filterable placeholder="数据域">
              <el-option v-for="opt in mainFields" :key="opt.tableFieldName"
                         :label="opt.showName" :value="opt.tableFieldName"/>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="condition" label="条件">
          <template #default="{row}">
            <el-select v-model="row.conditional" placeholder="条件"
                       clearable filterable v-if="isNotEmpty(row.conditionalOptions)">
              <el-option v-for="opt in row.conditionalOptions" :key="opt.value" :label="opt.title" :value="opt.value"/>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="fieldValue" label="值">
          <template #default="{row}">
            <el-input readonly v-model="row.fieldValueTitle" v-if="isNotEmpty(row.conditionalOptions)"
                      placeholder="请设置值" @click="() => openFieldValueConfiguration(row)"/>
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="sufBracket" label="后置括号">
          <template #default="{row}">
            <el-select v-model="row.sufBracket" placeholder="前置括号" clearable filterable>
              <el-option v-for="opt in sufBracketOptions" :key="opt" :label="opt" :value="opt"/>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="joinType" label="连接">
          <template #default="{row}">
            <el-select v-model="row.joinType" clearable filterable placeholder="连接">
              <el-option v-for="opt in joinTypeOptions" :key="opt.value" :label="opt.label" :value="opt.value"/>
            </el-select>
          </template>
        </el-table-column>


        <el-table-column show-overflow-tooltip>
          <template #default="{row}">
            <el-button size="small" circle icon="add" @click="add" type="primary"/>
            <el-popconfirm
              confirm-button-text="确定"
              @confirm="() => remove(row)"
              cancel-button-text="取消"
              title="确定删除吗?">
              <template #reference>
                <el-button size="small" circle icon="subtract" type="warning"/>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>

      </el-table>
    </div>
  </FModal>
  <FieldValueConfiguration ref="refFieldValueConfiguration"/>
</template>

<script setup>
import FModal from '@/components/FModal/index.vue';
import {defineExpose, reactive, ref, unref} from 'vue';
import {DefaultMenuActionRange, DefaultMenuDefinition} from '@/components/form/DefaultFormDefinition';
import MenuActionRangHelper from '@/components/form/MenuActionRangConfiguration/MenuActionRangHelper';
import {isEmpty, isNotEmpty, real} from '@/utils/CommonUtils';
import './style.css';
import FieldValueConfiguration from '@/components/form/MenuActionRangConfiguration/FieldValueConfiguration.vue';

const refFieldValueConfiguration = ref();
const menuActionRanges = ref([DefaultMenuActionRange]);
const refFModal = ref();
const menuDefinition = ref(JSON.parse(JSON.stringify(DefaultMenuDefinition)));
// const menuActionRanges = ref([]);
let originMenuDefinition = undefined;
const preBracketOptions = ['(', '((', '(((', '((((', '((((('];
const sufBracketOptions = [')', '))', ')))', '))))', ')))))'];
const joinTypeOptions = reactive([
  {value: 'and', label: '并且'},
  {value: 'or', label: '或者'}
]);
let menuActionRangHelper = undefined;
const mainFields = reactive([]);

function setData(_menuDefinition, formDefinition) {
  // menuActionRanges.value = [JSON.parse(JSON.stringify(DefaultMenuActionRange))];
  menuDefinition.value = JSON.parse(JSON.stringify(_menuDefinition));
  originMenuDefinition = _menuDefinition;

  menuActionRangHelper = new MenuActionRangHelper(formDefinition, menuActionRanges, menuDefinition);
  menuActionRangHelper.initMenuActionRanges();
  menuActionRangHelper.getMainFields(mainFields);
  refFModal.value.open();
}

function fieldChange(range) {
  range.conditional = undefined;
  range.fieldValue = undefined;
  range.fieldValueTitle = undefined;
  range.fieldComponent = undefined;
  range.conditionalOptions = [];
  let field = getFieldByFieldName(range.fieldName)
  console.log(range, field)
  menuActionRangHelper.parseActionOption(range);
}

function getFieldByFieldName(fieldName) {
  return real(mainFields).find(f => f.tableFieldName === fieldName);
}

function add() {
  menuActionRanges.value.push(JSON.parse(JSON.stringify(DefaultMenuActionRange)));
}

function remove(row) {
  let index = menuActionRanges.value.findIndex(m => m === row);
  if (index !== -1) {
    menuActionRanges.value.splice(index, 1);
  }
}

function openFieldValueConfiguration(menuActionRange) {
  let field = menuActionRangHelper.getFieldByFieldName(menuActionRange.fieldName);
  refFieldValueConfiguration.value.setData(menuActionRange, field);
}

function setMenuActionRangeToOrigin() {
  let res = unref(menuActionRanges);
  if (isNotEmpty(res) && res.length === 1
    && isEmpty(res[0].fieldName)
    && isEmpty(res[0].conditional)
    && isEmpty(res[0].fieldValueTitle)) {
    originMenuDefinition.menuActionRanges = undefined;
    refFModal.value.close();
    return
  }
  originMenuDefinition.menuActionRanges = unref(menuActionRanges);
  delete originMenuDefinition.menuActionRanges.conditionalOptions
  refFModal.value.close();
}

defineExpose({
  setData
});
</script>
